<template>
    <el-container class="content">
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="name" placeholder="请输入姓名" class="input"
                                      size="small"></el-input>
                            <el-select v-model="authScan" placeholder="扫码权限" class="select"
                                       size="small">
                                <el-option
                                    v-for="item in permissionOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="authCockpit" placeholder="驾驶舱权限" class="select"
                                       size="small">
                                <el-option
                                    v-for="item in permissionOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-button class="primary" @click="getList(1)" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example ref="table" :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                                   :stripe="true">
                        <template slot="authScan" slot-scope="scope">
                            <el-switch
                                v-model="scope.row.authScan"
                                active-color="#13ce66"
                                @change="changeScan(scope.row)"
                                inactive-color="#DCDFE6"
                                :active-value="1"
                                :inactive-value="0"
                            ></el-switch>
                        </template>
                        <template slot="authCockpit" slot-scope="scope">
                            <el-switch
                                v-model="scope.row.authCockpit"
                                active-color="#13ce66"
                                @change="changeCockpit(scope.row)"
                                inactive-color="#DCDFE6"
                                :active-value="1"
                                :inactive-value="0"
                            ></el-switch>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'

    export default {
        data() {
            return {
                DirMigration: false,
                name: '', // 姓名
                permissionOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '已授权',
                        value: 1
                    },
                    {
                        label: '未授权',
                        value: 0
                    }
                ],
                authScan: '', // 扫码权限
                authCockpit: '', // 扫码权限
                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '姓名',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'addr',
                        label: '住址',
                        minWidth: '250',
                        align: 'center'
                    },
                    {
                        prop: 'phone',
                        label: '手机号码',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'authScan',
                        label: '扫码权限',
                        align: 'center',
                        minWidth: '100'
                    },
                    {
                        prop: 'authCockpit',
                        label: '驾驶舱权限',
                        align: 'center',
                        minWidth: '100'
                    }
                    // {
                    //     prop: 'operation',
                    //     label: '操作',
                    //     align: 'center',
                    //     minWidth: '100',
                    //     fixed: 'right'
                    // }
                ],
                slotColumns: ['authScan', 'authCockpit'],
                page: {},
                index: 1,
                loading: false
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            // 获取列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/getThisCourt/getPage', {
                    name: this.name,
                    authScan: this.authScan,
                    authCockpit: this.authCockpit,
                    current: this.index || 1,
                    size: 15
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 重置操作
            reset() {
                this.name = ''
                this.authScan = ''
                this.authCockpit = ''
                this.getList(1)
            },
            changeScan(row) {
                let message, _this = this,
                    flag = row.authScan // 保存点击之后v-model的值(1/2)

                if (row.authScan === 1) {
                    message = '是否为该用户添加扫码权限'
                    row.authScan = 0
                } else {
                    message = '是否为该用户移除扫码权限'
                    row.authScan = 1
                }
                this.$method.messageBox('confirm', message, (action, instance) => {
                    if (action === 'confirm') {
                        _this.$http.post('/getThisCourt/updAuthScan?type=' + flag + '&id=' + row.id).then(result => {
                            _this.getList()
                        })
                    }
                }, '', false, false)
            },
            changeCockpit(row) {
                let message, _this = this,
                    flag = row.authCockpit // 保存点击之后v-model的值(1/2)

                if (row.authCockpit === 1) {
                    message = '是否为该用户添加驾驶舱权限'
                    row.authCockpit = 0
                } else {
                    message = '是否为该用户移除驾驶舱权限'
                    row.authCockpit = 1
                }
                this.$method.messageBox('confirm', message, (action, instance) => {
                    if (action === 'confirm') {
                        _this.$http.post('/getThisCourt/updAuthCockpit?type=' + flag + '&id=' + row.id).then(result => {
                            _this.getList()
                        })
                    }
                }, '', false, false)
            }
        },
        components: {
            tableExample,
            page
        }
    }
</script>

<style scoped lang="less">

</style>
